<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>[|.pageTitle|]</title>
    [|if .zTree|]
    <link rel="stylesheet" href="/static/zTree3/css/demo.css?t=5" type="text/css">
    <link rel="stylesheet" href="/static/zTree3/css/zTreeStyle/zTreeStyle.css" type="text/css"> [|end|]
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <script src="/static/layui/layui.js?s=36"></script>
    <script src="/static/js/main.js?s=2124"></script>
    <script src="/static/js/echarts.js"></script>
</head>
<form>
    <div style="left:900px" class="layui-input-inline">
        <div class="layui-inline"><label class="layui-form-label">游戏平台:</label></div>
        <select name="selectUserID" id="selectUserID" size="1" style="width: 100px;height: 37px" lay-verify="">
                   <option value="1" selected="0">请选择</option>
                   <option value="1">IOS</option>
                   <option value="2">安卓</option>
                   <option value="3">PC</option>
        </select>
        <div class="layui-inline"><label class="layui-form-label">时间范围:</label></div>

        <div class="layui-input-inline" style="width:180px;">
            <input type="text" name="date1" id="date1" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" value="">
        </div>
        <label>-</label>
        <div class="layui-input-inline" style="width:180px;">
            <input type="text" name="date2" id="date2" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" value="">
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="queryBtn">查询</button>
        </div>
    </div>

    <div id="main" style="width:1700px;height:400px;"></div>
    <br />

    <hr class="layui-bg-gray">
    <div>
        <p>
            <label id="" style="color:rgb(0, 0, 0);">当日充值金额:</label>
            <label id="totalamount" style="color:red;">666元</label>
            <label id="" style="color:rgb(0, 0, 0);">,充值人数:</label>
            <label id="peopleCount2" style="color:red;">40人</label>
            <label id="" style="color:rgb(0, 0, 0);">,GM充值:</label>
            <label id="gmamount" style="color:red;">0元</label>
            <label id="" style="color:rgb(0, 0, 0);">,IOS充值:</label>
            <label id="iosamount" style="color:red;">666元</label>
        </p>
    </div>



</form>


<table class="layui-table" lay-data="{width: 892, height:332, url:'', page:true, id:'idTest'}" lay-filter="dataTable" id="dataTable">

</table>



<script type="text/html" id="barDemo">

</script>

<script>
    var $;
    dataChart = new Array();
    layui.use(['table', 'form', 'layedit', 'laydate', 'jquery', 'element'], function() {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        $ = layui.jquery
        var element = layui.element;
        table = layui.table;

        //填写默认时间
        Date.prototype.Format = function(fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        var date = new Date();
        var time1 = Date.parse(new Date()) / 1000; //获取当前秒数()
        var time2 = time1 - (30 * 24 * 3600);

        var unixTimestamp = new Date(time2 * 1000).Format("yyyy-MM-dd");

        document.getElementById('date1').value = unixTimestamp

        var unixTimestamp = new Date(time1 * 1000).Format("yyyy-MM-dd");

        document.getElementById('date2').value = unixTimestamp

        //日期
        laydate.render({
            elem: '#date1',
            //type: 'datetime',
            format: 'yyyy-MM-dd'
        });

        laydate.render({
            elem: '#date2',
            //type: 'datetime',
            format: 'yyyy-MM-dd'
        });

        //监听提交
        form.on('submit(queryBtn)', function(data) {
            
            var date1 = document.getElementById('date1').value;
            var date2 = document.getElementById('date2').value;
            if (CheckTimeRange(date1 + ' 00:00:00',date2+' 00:00:00' ,365))
            {
                return  btnClick("");
            }

            return false;
        });

        btnClick("curDay")
        btnClick("")
    });




    //图表
    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));


    // 指定图表的配置项和数据
    function updateChart() {

        var dateList = dataChart.map(function(item) {
            return item[0];
        });
        var valueList = dataChart.map(function(item) {
            return item[1];
        });

        var option = {

            title: {
                text: '充值统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['充值金额(元)']
            },
            grid: {
                left: '0.5%',
                right: '5.1%',
                bottom: '0%',

                containLabel: true

            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                    magicType: {
                        type: ['line', 'bar']
                    },
                }
            },
            xAxis: {
                boundaryGap: false,
                data: dateList,
                axisLabel: {
                    rotate: 45, //刻度旋转45度角
                    textStyle: {
                        //color: "blue",
                        fontSize: 12
                    }
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '充值金额(元)',
                type: 'line',
                stack: '总量',
                data: valueList,

                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值',

                    }]
                }
            }]
        };

        myChart.setOption(option);

        // 使用刚指定的配置项和数据显示图表。
    }

    function btnClick(curDay) {
        //console.log("btnClick:" + curDay)
        var selectUserID = document.getElementById("selectUserID")
        var date1 = document.getElementById("date1")
        var date2 = document.getElementById("date2")

        table.render({
            elem: '#dataTable',
            //data: datas,
            where: {
                selectUserID: selectUserID.value,
                date1: date1.value,
                date2: date2.value,
                curDay: curDay
            },
            url: '/chartdatas/rechargetable',
            done: function(res, curr, count) {
                //alert(JSON.stringify(res.data));
                //var dataChart = new Array();
                var i = 0;
                var curTotal = 0;
                var curpeople = 0;
                var GMTotal = 0;
                var iosTotal = 0;
                var data = res.data;
                dataChart = [];
                for (var o in data) {
                    var item = data[o];
                    dataChart[i] = [item.date2, item.totalamount];

                    i = i + 1;
                    if (curDay != "") {
                        curTotal += item.totalamount;
                        curpeople += item.peopleCount2;
                        GMTotal += item.gmamount;
                        iosTotal += item.iosamount;
                    }

                }

                if (curDay != "") {
                    //当天数据
                    document.getElementById('totalamount').innerHTML = curTotal + "元"
                    document.getElementById('peopleCount2').innerHTML = curpeople
                    document.getElementById('gmamount').innerHTML = GMTotal + "元"
                    document.getElementById('iosamount').innerHTML = iosTotal + "元"
                } else {
                    updateChart(); //统计一短时间内的
                }
            },

            cols: [
                [ //标题栏
                    {
                        field: 'date2',
                        title: '日期',
                        height: 300,
                        width: 300
                    }, {
                        field: 'totalamount',
                        title: '总充值金额(元)',
                        height: 300,
                        width: 200
                    }, {
                        field: 'iosamount',
                        title: 'IOS金额',
                        height: 300,
                        width: 150
                    }, {
                        field: 'gmamount',
                        title: 'GM金额(元)',
                        height: 300,
                        width: 200
                    }, {
                        field: 'peopleCount2',
                        title: 'IOS充值人次',
                        height: 100,
                        width: 200
                    }, {
                        field: 'rechargecount',
                        title: 'IOS充值次数',
                        height: 300,
                        width: 650
                    }
                ]
            ],
            skin: 'row', //表格风格
            even: true,
            page: true,
            limits: [30, 50, 100],
            limit: 100, //每页默认显示的数量
            width: 'full-10',
            rules: 'all',
            height: 'full-105'
        });
    }
</script>
</body>

</html>